<template>
  <div>
    <el-dialog
      title="配置分销方"
      :visible.sync="dialogVisible"
      width="25%"
      :before-close="handleClose"
    >
      <div>
        <div class="title">当前短剧：{{ rowInfo.title }}/{{ rowInfo.property_type == 1 ? '合同剧' : rowInfo.property_type == 2? '版本剧' : '马甲剧' }}/{{ rowInfo.id }}
        </div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          label-position="top"
        >
          <el-form-item
            label="分销方"
            prop="distributor_ids"
          >
            <el-select
              v-model="ruleForm.distributor_ids"
              style="width: 100%;"
              multiple
              filterable
              collapse-tags
              clearable
            >
              <el-option
                v-for="item in distributor_ids"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { commonData } from '@/api/common'
import { addDistributor } from '@/api/content'
export default {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: true,
      ruleForm: {
        distributor_ids: []
      },
      rules: {
        distributor_ids: [{ required: true, message: '请选择分销方', trigger: 'change' }]
      },
      distributor_ids: []
    }
  },
  mounted() {
    console.log(this.rowInfo)
    this.onGetDistributor()
    this.ruleForm.distributor_ids = this.rowInfo.distributors.map((item, index) => {
      return item.id * 1
    })
  },
  methods: {
    async onGetDistributor() {
      const res = await commonData({ type: 'distributor' })
      if (res.status_code === 1) {
        this.distributor_ids = res.data.data
      }
    },
    handleClose() {
      this.$emit('coles')
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          addDistributor({
            id: this.rowInfo.id,
            ...this.ruleForm
          }).then((res) => {
            this.$emit('ok')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1d2129;
  line-height: 32px;
  text-align: left;
  font-style: normal;
}
::v-deep.el-form-item {
  margin-bottom: 0;
}
::v-deep .el-dialog__footer {
  padding: 0;
}
</style>